<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #circle{
            width:500px;
            height:500px;
            border:1px solid green;
            position: relative;
            margin:50px auto;
            border-radius:50%;
        }
         #circle .ball{
            width:10px;
            height:10px;
            position: absolute;
            margin-top:-5px;
            margin-left:-5px;
            border-radius:50%;
            background-color: red;
         }

    </style>
</head>
<body>
    <div id="circle">
        <div class="ball"> </div>
    </div>
    <script type="text/javascript">
        var oCircle = document.getElementById('circle'),
        oBall = oCircle.getElementsByClassName('ball')[0],
        r = parseInt( getComputedStyle(oCircle).width )/2,
        deg=0,timer;
        timer = setInterval(function(){
            deg--;
            var left = r + Math.cos(deg*Math.PI/180)*r;
            var top = r - Math.sin(deg*Math.PI/180)*r;
            oBall.style.top = top+'px';
            oBall.style.left = left+'px';
        },15);



    </script>
</body>
</html>
